<template>
    <div class="container">
        <!-- 添加按钮 -->
        <div class="row addList mt-4">
            <div class="col d-grid gap-2">
                <button class="btn" @click="addList">添加</button>
            </div>
        </div>
        <!-- 卡片 -->
        <div class="row row-cols-1 list g-4 p-4">
            <div class="col">
                <div class="card" v-for="(item, index) in notesList" :key="item.id"
                    :class="active === item.id ? 'select' : ''"
                    @click="activeClass(item.id, item.notes_title, item.notes_content)" @dblclick="removeList">
                    <div class="card-header">
                        <div ref="title">{{ item.notes_title }}</div>
                    </div>
                    <div class="card-body">
                        <div class="card-text">
                            <p>{{ item.notes_content }}</p>
                        </div>
                        <div class="card-time d-flex flex-row-reverse">
                            <p>{{ item.notes_time }}</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
// 导入兄弟传值的组件
import bus from '../EventBus.js'

export default {
    name: 'Sidebar',
    data() {
        return {
            // 默认选中的第一个笔记
            active: 0,
            // 笔记的所有内容
            notesList: [],
        }
    },
    props: {
        notes_title: {
            type: String,
            default: '新建注释'
        },
        notes_content: {
            type: String,
            default: '请注意...'
        },
        notes_time: {
            type: String,
            default: '2022年11月08日星期二 14:48:20'
        },
    },

    methods: {
        // 添加函数
        async addList() {
            // 判断是否有token
            if (!localStorage.getItem('token')) return this.$router.push('/login')
            // 添加条例的处理函数
            const { data } = await this.$http.post('/my/addnotes', { notes_title: this.notes_title, notes_content: this.notes_content, notes_time: this.notes_time })
            if (data.status !== 0) return alert(data.message)
            this.notesList = data.data
        },

        // 切换的样式,并告诉内容区域显示什么内容
        activeClass(index, title, content) {
            // 切换样式
            this.active = index
            // 将内容发送给兄弟组件
            const data = { title: title, content: content }
            bus.emit('content', data)
        },
        // 删除笔记
        async removeList() {
            const isDel = confirm('你确认要删除笔记，删除笔记内容后果将不可挽回 ！！！')
            // 取消
            if (!isDel) return
            // 至少保留一条笔记
            if (this.notesList.length < 2) return alert('至少保留一条笔记!!')
            // 请求删除
            const { data } = await this.$http.post('/my/deletenotes', { id: this.active })
            //    删除失败
            if (data.status !== 0) return alert(data.message)
            // 刷新界面
            this.$router.go(0)
        }
    },
    // 网页加载完成获取所有笔记内容
    async created() {

        // 获取数据
        const { data } = await this.$http.post('/my/getnotes')
        this.notesList = data.data
        // 向内容组件发送数据
        // 如果没有数据就停止操作
        if (this.notesList.length < 1) return this.addList()
        this.active = this.notesList[0].id
        const dataStr = { title: this.notesList[0].notes_title, content: this.notesList[0].notes_content }
        bus.emit('default', dataStr)
    },
    // 内容更新
    beforeUpdate() {

        // 标题变化
        bus.on('titleChange', async (data) => {
            // 向数据库更新数据
            const { data: res } = await this.$http.post('/my/updatenotes', { notes_title: data.title, notes_content: data.content, notes_time: data.time, id: this.active })
            if (res.status !== 0) return alert(res.message)
            this.notesList = res.data
        }),
            // 内容变化
            bus.on('contentChange', async (data) => {
                // 向数据库更新数据
                const { data: res } = await this.$http.post('/my/updatenotes', { notes_title: data.title, notes_content: data.content, notes_time: data.time, id: this.active })
                if (res.status !== 0) return alert(res.message)
                this.notesList = res.data
            })
    }


}
</script>

<style lang="less" scoped>
// 定义宽度变量
@vw: 19.2vw;

.container {

    // 选中的样式
    .select {
        border: (3/@vw) solid #ebc7f8;

    }

    // 添加按钮
    .addList {
        .col {
            .btn {
                font-size: 1vw;
                cursor: pointer;
                height: 5vw;
                background-color: #623c79;
                color: #fff;
                font-weight: bold;
            }
        }

    }

    // 笔记卡片
    .list {
        cursor: pointer;


        .card {


            background-color: #331f49;
            color: #fff;
            margin-bottom: 1vw;

            .card-header {
                padding-right: 1vw;
                font-size: (20/@vw);
                border-bottom: (2/@vw) dashed #ebc7f8;

                div {
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }
            }

            .card-body {


                p {
                    margin: 0;
                    padding: 0;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }

                .card-text {
                    font-size: (16/@vw);
                }

                .card-time {
                    font-size: (12/@vw);
                    color: #aaa;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }
            }
        }
    }
}
</style>